<template>
	<section class="h100 w100 layout flex-col">
		<div class="header flex">
			<div class="menu f1 w0">
				<my-menu
					:data="Menus"
					:default-active="activeMenu"
					:props="{ id: 'path', route: 'path' }"
					@select="menuTopSelect"
					mode="horizontal"
					unique-opened
					menu-trigger="hover"
				/>
			</div>
			<div class="time">
				<date />
			</div>
		</div>
		<el-main class="mainContent" id="ContentArea">
			<!--内容区-->
			<router-view v-slot="{ Component }">
				<transition name="el-fade-in-linear" mode="out-in" appear>
					<!-- <keep-alive :include="[]"> -->
					<component :is="Component" :key="$route.path" />
					<!-- </keep-alive> -->
				</transition>
			</router-view>
		</el-main>
	</section>
</template>

<script setup name="layout">
import date from './date.vue'
import { find } from '@u/tree'
import Menus from './Menus'

// 选中的菜单
let activeMenu = ''
watch(
	useRoute(),
	(val) => {
		if (find(Menus, true, (item, i, data) => item.path === val.path) !== null) activeMenu = val.path
	},
	{ immediate: true }
)

function menuTopSelect(key, keyPath) {
	$router.push({ path: key })
}
</script>

<style lang="scss" scoped>
.layout {
	.header {
		--menu-height: 72px;
		background: url('../assets/img/layout/header.png') no-repeat;
		background-size: 100% 100%;
		height: 88px;
		box-sizing: border-box;
		z-index: 10;
		.menu {
			margin-left: 550px;
			display: flex;
			align-items: center;
			height: var(--menu-height);
		}
		.time {
			height: var(--menu-height);
			margin: 0 20px;
		}
	}
	.mainContent {
		padding: 0;
		height: 0;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		margin-top: -16px;
		height: 0;
	}
}
</style>
